<template>
    <Div class="person">
        <Row class="person-nav">
            <Button type="primary" icon="plus" @click="addPerson">添加打折活动</Button>
            <Form>
                <FormItem>
                    <Label>活动名称</Label>
                    <Input placeholder="活动名称"></Input>
                </FormItem>
                <FormItem>
                    <Label>活动门店</Label>
                    <i-select>
                        <Option value="123"></Option>
                    </i-select>
                </FormItem>
                <FormItem>
                    <Label>活动时间</Label>
                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="开始时间"></DatePicker>
                    <span>-</span>
                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="结束时间"></DatePicker>
                </FormItem>
            </Form>
            <Div class="seach-btn">
                <Button icon="ios-search">查询</Button>
            </Div>
        </Row>
        <Row>
            <Table :columns="person_title" :data="person_data"></Table>
            <Page :total="20" show-elevator show-total class-name="page"></Page>
        </Row>
        <Modal v-model="add_person" :mask-closable="false" title="添加打折活动" :transfer="false" class-name="add-person">
            <Form>
                <FormItem>
                    <Label>活动名称</Label>
                    <Input placeholder="建议使用手机号作为用户名"></Input>
                </FormItem>
                <FormItem>
                    <Label>活动门店</Label>
                    <Select filter>
                        <Option value="嗨客S店"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>优惠类型</Label>
                    <Select filter>
                        <Option value="付款折扣"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>订单金额限制(元)</Label>
                    <Input placeholder="高于此金额的订单才能享受随机立减，0为不限"></Input>
                </FormItem>
                <FormItem>
                    <Label>最高立减金额(元)</Label>
                    <Input placeholder="最高优惠金额,0不限"></Input>
                </FormItem>
                <FormItem v-if="is_show === 0">
                    <Label>最低立减金额(元)</Label>
                    <Input placeholder="随机立减可获得的最低优惠金额"></Input>
                </FormItem>
                <FormItem v-else-if="is_show === 1">
                    <Label>付款折扣(折)</Label>
                    <Input placeholder="折扣优惠金额，比如9.5表示95折。"></Input>
                </FormItem>
                <FormItem v-else-if="is_show === 2">
                    <Label>减免金额(元)</Label>
                    <Input placeholder="优惠类型请选择满减免金额"></Input>
                </FormItem>
                <FormItem>
                    <Label>支付通道</Label>
                    <Select>
                        <Option value="全部通道"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>活动时间</Label>
                    <Date-picker format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期"></Date-picker>
                </FormItem>
                <FormItem>
                    <Label>备注</Label>
                    <i-input type="textarea" :autosize="true" placeholder="请输入..." :row="2" style="width:200px;"></i-input>
                </FormItem>
                <FormItem>
                    <Label>活动状态</Label>
                    <RadioGroup v-model="state">
                        <Radio label="正常"></Radio>
                        <Radio label="停用"></Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <Div slot="footer">
                <Button type="primary">确认保存</Button>
            </Div>
        </Modal>

        <Modal v-model="edit_person" :mask-closable="false" title="修改活动" :transfer="false" class-name="add-person">
             <Form>
                <FormItem>
                    <Label>活动名称</Label>
                    <Input placeholder="建议使用手机号作为用户名"></Input>
                </FormItem>
                <FormItem>
                    <Label>活动门店</Label>
                    <Select filter>
                        <Option value="嗨客S店"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>优惠类型</Label>
                    <Select filter>
                        <Option value="付款折扣"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>订单金额限制(元)</Label>
                    <Input placeholder="高于此金额的订单才能享受随机立减，0为不限"></Input>
                </FormItem>
                <FormItem>
                    <Label>最高立减金额(元)</Label>
                    <Input placeholder="最高优惠金额,0不限"></Input>
                </FormItem>
                <FormItem v-if="is_show === 0">
                    <Label>最低立减金额(元)</Label>
                    <Input placeholder="随机立减可获得的最低优惠金额"></Input>
                </FormItem>
                <FormItem v-else-if="is_show === 1">
                    <Label>付款折扣(折)</Label>
                    <Input placeholder="折扣优惠金额，比如9.5表示95折。"></Input>
                </FormItem>
                <FormItem v-else-if="is_show === 2">
                    <Label>减免金额(元)</Label>
                    <Input placeholder="优惠类型请选择满减免金额"></Input>
                </FormItem>
                <FormItem>
                    <Label>支付通道</Label>
                    <Select>
                        <Option value="全部通道"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>活动时间</Label>
                    <Date-picker format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期"></Date-picker>
                </FormItem>
                <FormItem>
                    <Label>备注</Label>
                    <i-input type="textarea" :autosize="true" placeholder="请输入..." :row="2" style="width:200px;"></i-input>
                </FormItem>
                <FormItem>
                    <Label>活动状态</Label>
                    <RadioGroup v-model="state">
                        <Radio label="正常"></Radio>
                        <Radio label="停用"></Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <Div slot="footer">
                <Button type="primary">确认保存</Button>
            </Div>
        </Modal>
    </Div>
</template>

<script>
export default {
    name: 'person-list',
    data(){
        return{
            add_person: false,
            edit_person: false,
            is_show:1,
            state: '正常',
            person_title:[
                {
                    title: '门店ID',
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '所属门店',
                    align: 'center',
                    key: 'shop_name'
                },
                {
                    title: '店员名称',
                    align: 'center',
                    key: 'username'
                },
                {
                    title: '手机号',
                    align: 'center',
                    key: 'phone'
                },
                {
                    title: '店员账号',
                    align: 'center',
                    key: 'person_num'
                },
                {
                    title: '职位',
                    align: 'center',
                    key: 'post'
                },
                {
                    title: '添加时间',
                    align: 'center',
                    key: 'add_time'
                },
                {
                    title: '状态',
                    align: 'center',
                    key: 'state'
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                        return h('Div',[
                            h('Button',{
                                props:{
                                    type: 'text'
                                },
                                style:{
                                    color: '#ff9000'
                                },
                                on:{
                                    click:()=>{
                                        this.edit_person = true;
                                        this.editPerson(params.index);
                                    }
                                }
                            },'修改'),
                            h('Poptip',{
                                    props: {
                                    confirm: true,
                                    title: '您确定要删除这条数据吗?',
                                    transfer: true
                                },
                                on: {
                                    'on-ok': () => {
                                        this.person_data.splice(params.index, 1);
                                    }
                                }
                            },[
                                h('Button',{
                                        props: {
                                            type: 'text'
                                        },
                                        style: {
                                            color: '#c63232'
                                        }
                                    },'删除')
                                ])
                        ])
                    }
                }
            ],
            person_data:[
                {
                    id: '1',
                    shop_name: '嗨客A店',
                    username: '张三',
                    phone: '123456798100',
                    person_num: '1314',
                    post: '门店领班',
                    add_time: '2011-11-02 13:14:00',
                    state: '正常'
                }
            ]
        }
    },
    methods:{
        addPerson(){
            this.add_person = true;
        },
        editPerson(index){
            this.edit_person = true;

        }
    }
}
</script>

<style scoped lang="less">
    @import '../store/store.less';
    @import 'activity.less';
</style>
